<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <NavBar :navList="navList" @change="(index: number) => (current = index)" />
      <!-- <Top></Top> -->
    </view>
    <!-- 页面内容 -->
    <view v-if="current === 0">
      <Notice></Notice>
    </view>
    <view v-else-if="current === 1"></view>
    <view v-else></view>
  </view>
</template>

<script setup lang="ts">
import Top from '@/components/Top.vue'
import NavBar from '@/components/NavBar.vue'
import Notice from './components/Notice.vue'
import { ref, watch, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 设置安全区域
const statusBarHeight = ref<number>(0)

// 在组件挂载时获取系统信息
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight as number
    },
  })
})

const gointerchange = () => {
  if (current.value === 1) {
    uni.navigateTo({
      url: '/pages/my/MyInterchange/MyInterchange',
    })
  } else if (current.value === 2) {
    uni.navigateTo({
      url: '/pages/my/Look/Look',
    })
  }
}
// 导航栏组件
const navList = ref(['通知', '互换', '访客'])
const current = ref(0)
watch(current, (newVal) => {
  gointerchange()
})
onShow(() => {
  current.value = 0
})
</script>

<style scoped lang="scss">
.custom-navigation-bar {
  background: linear-gradient(to right, #ff9a9e, #fad0c4); /* 渐变效果 */
  height: 44px; /* 导航栏高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* 设置标题文字颜色 */
  font-size: 18px;
  font-weight: bold;
}

.page-content {
  padding-top: calc(44px + var(--status-bar-height)); /* 状态栏高度 + 自定义导航栏高度 */
  /* 使用 JavaScript 的 ref 来动态更新 statusBarHeight */
}
</style>
